<template>
  <a
    v-bind:href="href"
    v-bind:class="{ active: isActive }"
    v-on:click="go"
  >
    <slot></slot>
  </a>
</template>

<script>
  export default {
    name: 'z-v-link',
    data() {
      return {
        isCollapse: false
      };
    },
    props: {
      href: {
        type:String,
        required: true
      }
    },
    computed: {
      isActive () {
        return this.href === this.$root.currentRoute
      }
    },
    methods: {
      go (event) {
        console.log(event);
        event.preventDefault();
        this.$root.currentRoute = this.href;
        //window.history.pushState(null, routes[this.href], this.href);
        window.location.hash=this.href;
      }
    }
  }
</script>

<style scoped>
  .active {
    color: cornflowerblue;
  }
</style>
